<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>


<div id="app">
<!--    <div>-->
<!--        <el-button id = "login" type="text" @click="dialogLoginVisible = true">登 录</el-button>-->
<!--    </div>-->

<!--医生登录-->
    <el-dialog title="登录" :visible.sync="dialogLoginVisible">
        <el-form :model="doctor">
            <el-form-item label="账号" :label-width="formLabelWidth">
                <el-input v-model="doctor.accountNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="doctor.pwd" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
<!--            <el-button @click="dialogLoginVisible = false">取 消</el-button>-->
            <el-button type="primary" @click="login">登录</el-button>
        </div>
    </el-dialog>

<!--    查看坐诊时间-->
    <el-button type="text" @click="selectDoctorSit">查看坐诊信息</el-button>

    <el-dialog title="坐诊信息" :visible.sync="dialogSitVisible">
        <el-table :data="doctorSits">
            <el-table-column property="doctorName" label="姓名" width="200"></el-table-column>
            <el-table-column property="date" label="日期" width="150"></el-table-column>

            <el-table-column property="dayOfWeek" label="星期"></el-table-column>
            <el-table-column property="amorPM" label="上/下午" width="200"></el-table-column>

            <el-table-column property="remainNum" label="余量" width="200"></el-table-column>
        </el-table>
    </el-dialog>

<!--    查询表单-->
    <el-form :inline="true" :model="regist" class="demo-form-inline">
        <el-form-item label="用户姓名">
            <el-input v-model="regist.userName" placeholder="用户姓名"></el-input>
        </el-form-item>

        <span class="demonstration">默认</span>
            <el-date-picker
                    v-model="regist.date"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>


        <el-form-item label="上/下午">
            <el-select v-model="regist.amorPM" placeholder="上/下午">
                <el-option label="上午" value="上午"></el-option>
                <el-option label="下午" value="下午"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <template>
        <el-table
                :data="regists"
                style="width: 100%"
                :row-class-name="tableRowClassName">

            <el-table-column
                    prop="userName"
                    label="病人姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="orderTime"
                    label="预约时间">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="类型"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="挂号时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="dayOfWeek"
                    label="星期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="amorPM"
                    label="上/下午"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="remarks"
                    label="备注"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="relateWay"
                    label="联系方式"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="serialNum"
                    label="序号"
                    width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">填写病例记录</el-button>
<!--                    <el-button-->
<!--                            size="mini"-->
<!--                            type="danger"-->
<!--                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>
    </template>


<!--    填写病例记录 -->


    <el-dialog title="病例记录" :visible.sync="dialogCaseVisible">

        <el-form :model="caserecord">
            <el-form-item label="治疗周期" :label-width="formLabelWidth">
                <el-input v-model="caserecord.therapyCycle" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="检查情况" :label-width="formLabelWidth">
                <el-input v-model="caserecord.checkSituation" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="疾病类型" :label-width="formLabelWidth">
                <el-input v-model="caserecord.diseaseType" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="医生建议" :label-width="formLabelWidth">
                <el-input v-model="caserecord.medicalAdvice" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogCaseVisible = false">取 消</el-button>
            <el-button type="primary" @click="onCase">确 定</el-button>
        </div>
    </el-dialog>

</div>

<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>

<script>

    new Vue({
        el:"#app",

        data() {

            return {

                regist: {
                    userName: '',
                    date: '',
                    amorPM:'',
                    doctorID:''
                },

                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                regists: [],
                caserecord:{
                    therapyCycle:"",
                    checkSituation:"",
                    diseaseType:"",
                    medicalAdvice:""
                },
                doctorSits: [],

                dialogSitVisible:false,
                dialogLoginVisible:false,
                dialogCaseVisible: false,

                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                },
                value1:"",
                isLogin:true,
                doctor: {
                },

                from:{
                },
                formLabelWidth: '120px'
            }
        },

        mounted(){
            this.selectA();
        },
        methods: {

            async selectA(){
                await this.selectDoctorByDoctorId();
                await this.selectRegist();
            },

            async selectDoctorByDoctorId(){
                await axios.post("http://localhost:8080/doctors/selectDoctor").then(resp=>{
                    this.doctor = resp.data;
                })
            },

            login() {
                axios.post("http://localhost:8080/doctors/login",this.doctor).then(resp=>{
                    if(resp.data.msg === "success"){
                        this.isLogin = true;
                        this.doctor = resp.data.data;
                        document.getElementById("login").style.display = "none";
                        this.$message.success("登录成功");
                        this.dialogLoginVisible = false;
                        this.selectRegist();
                    }else{
                        this.$message.error("登陆失败");
                    }
                })


            },

            selectDoctorSit() {
                if(this.isLogin === false){
                    this.$message.error("请先登录");
                }else{
                    this.dialogSitVisible = true;
                    axios.get("http://localhost:8080/doctorSit/selectDoctorSit?doctorID="+this.doctor.doctorID).then(resp=>{
                        this.doctorSits = resp.data;
                    })

                }


            },

            async selectRegist() {
                if(this.isLogin === true){
                    console.log(this.doctor)
                    this.regist.doctorID = this.doctor.doctorID;
                    console.log(this.regist);
                    await axios.post("http://localhost:8080/register/selectDoctorID",this.regist).then(resp=>{
                        this.regists = resp.data;
                    })
                }
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },

            onSubmit() {
                this.selectRegist();
            },
            handleEdit(index, row) {
                this.caserecord.registID = row.registID;
                this.dialogCaseVisible = true;
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },

            onCase() {
                console.log(this.caserecord);
                axios.post("http://localhost:8080/case/addCase",this.caserecord).then(resp=>{
                    if(resp.data === 1){
                        this.$message.success("记录成功");
                        this.selectRegist()
                    }else{
                        this.$message.error("记录失败")
                    }
                })

                this.dialogCaseVisible = false;
            }
        },

    })
</script>

</body>
</html>